/**
 * Created by showtan on 2018/12/27.
 * 任务指派
 */

import Picker from 'react-native-picker';

let pickerProps = {
  pickerToolBarFontSize: adapt(16),
  pickerFontSize: adapt(16),
  pickerFontColor: [255, 0, 0, 1],
  pickerBg: [255, 255, 255, 1],
  pickerConfirmBtnText: '确定',
  pickerCancelBtnText: '取消',
  pickerTitleText: '请选择任务类型',
  pickerConfirmBtnColor: [0, 194, 239, 1],
  pickerCancelBtnColor: [16, 142, 233, 1]
};

export default class AssignTask extends Component {

  static navigationOptions = ({ navigation }) => ({
    title: '指派任务'
  });

  constructor(props) {
    super(props);
    this.state = {
      name: '', // 任务名称
      class: '请选择任务类型', // 类型
      pressingStatus: 1, // 紧急状态
      phone: '', // 手机号
      showMyPhone: false, // 是否显示可选手机号
      address: '', // 地址
      receiver: '', // 接单人
      // publisher: '', // 发布人
      description: '', // 任务说明
    }
  }

  _showDatePicker = () => {
    Picker.init({
      pickerData: [1, 2, 3, 4, 5, 6, 7, 8],
      ...pickerProps,
      onPickerConfirm: (pickedValue, pickedIndex) => {
        console.log('date', pickedValue[0], pickedIndex);
        this.setState({ class: pickedValue[0] });
      }
    });
    this.setState({ showMyPhone: false }); Picker.show();
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.name !== this.state.name || nextState.class !== this.state.class ||
      nextState.pressingStatus !== this.state.pressingStatus || nextProps.phone !== this.props.phone ||
      nextState.showMyPhone !== this.state.showMyPhone || nextState.address !== this.state.address ||
      nextState.receiver !== this.state.receiver || nextState.description !== this.state.description;
  }

  componentWillUnmount() {
    Picker.hide();
  }

  render() {
    let assignTaskData = [
      { name: '任务名称', placeholder: '请输入任务名称', changeFunc: (name) => this.setState({ name }), value: this.state.name },
      { name: '类型', placeholder: '请选择任务类型' },
      { name: '紧急状态' },
      { name: '联系电话', placeholder: '请输入你的电话号码', changeFunc: (phone) => this.setState({ phone, showMyPhone: phone == '17628292452'.substring(0, phone.length) }), value: this.state.phone },
      { name: '地址', placeholder: '请输入你的位置', changeFunc: (address) => this.setState({ address }), value: this.state.address },
      { name: '接单人', placeholder: '请输入接单人的昵称或手机号', changeFunc: (receiver) => this.setState({ receiver }), value: this.state.receiver },
      // { name: '发布人', placeholder: '请输入你的姓名', changeFunc: (publisher) => this.setState({ publisher }), value: this.state.publisher },
      { name: '任务说明', placeholder: '请输入此次任务说明', changeFunc: (description) => this.setState({ description }), value: this.state.description },
    ];
    console.log(this.state.pressingStatus == 2);
    return (
      <View style={styles.container}>
        <KeyboardAwareScrollView keyboardShouldPersistTaps='always' showsVerticalScrollIndicator={false}>
          <View style={{ flex: 1, backgroundColor: '#fff', paddingHorizontal: adapt(15) }}>
            {/* 新增收货地址需填信息 */}
            {assignTaskData.map((item, index) =>
              <View key={index} style={[styles.commonDataCell, index == 6 && { borderBottomWidth: 0, height: adapt(100), alignItems: 'flex-start' }]}>
                <Text style={[styles.commonText, index == 6 && { marginTop: adapt(15) }]}>{item.name}</Text>
                {(index != 1 && index != 2) &&
                  <TextInput value={item.value} style={index == 6 ? styles.areaInputStyle : styles.textInputStyle} onChangeText={item.changeFunc}
                    onFocus={() => { this.setState({ showMyPhone: (index == 3 && this.state.phone.length == 0) ? true : false }); Picker.hide(); }}
                    placeholder={item.placeholder} underlineColorAndroid='transparent' multiline={index == 6 ? true : false}
                    keyboardType={index == 1 ? 'numeric' : 'default'} selectionColor={themeColor} />}
                {/* 类型 */}
                {index == 1 && <TouchableOpacity activeOpacity={.6} onPress={this._showDatePicker} style={{ flexDirection: 'row', flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
                  <Text style={[styles.commonText, { marginLeft: adapt(10) }, this.state.addressText == item.placeholder && { color: isIOS ? '#ccc' : '#757575' }]}>{this.state.class}</Text>
                </TouchableOpacity>}
                {/* 紧急 */}
                {index == 2 && <View style={{ flexDirection: 'row' }}>
                  <TouchableOpacity onPress={() => { this.setState({ pressingStatus: 1, showMyPhone: false }); Picker.hide(); }} activeOpacity={.6} style={styles.commonCell}>
                    <View style={styles.circleCell}>
                      <View style={[styles.backgroundColorCircle, this.state.pressingStatus == 1 && { backgroundColor: '#4a4a4a' }]} />
                    </View>
                    <Text style={[styles.commonText, { marginLeft: adapt(4) }]}>紧急</Text>
                  </TouchableOpacity>
                  <TouchableOpacity onPress={() => { this.setState({ pressingStatus: 2, showMyPhone: false }); Picker.hide(); }} activeOpacity={.6} style={[styles.commonCell, { marginLeft: adapt(43) }]}>
                    <View style={styles.circleCell}>
                      <View style={[styles.backgroundColorCircle, this.state.pressingStatus == 2 && { backgroundColor: '#4a4a4a' }]} />
                    </View>
                    <Text style={[styles.commonText, { marginLeft: adapt(4) }]}>不紧急</Text>
                  </TouchableOpacity>
                </View>}
              </View>)}
            {this.state.showMyPhone && <TouchableOpacity activeOpacity={.6} onPress={() => this.setState({ phone: '17628292452', showMyPhone: false })} style={styles.showMyPhoneCell}>
              <Text style={{ fontSize: adapt(12), marginLeft: adapt(11), color: '#4a4a4a' }}>17628292452</Text>
            </TouchableOpacity>}
          </View>
        </KeyboardAwareScrollView>
        <TouchableOpacity onPress={() => { Toast.success('指派任务成功'); this.props.navigation.goBack(); }} activeOpacity={.8} style={styles.bottomCell}>
          <Text style={{ color: '#fff', fontWeight: '500', fontSize: adapt(16), marginTop: adapt(14) }}>确定指派</Text>
        </TouchableOpacity>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ededed'
  },
  commonText: {
    color: '#4a4a4a',
    fontSize: adapt(12)
  },
  textInputStyle: {
    flex: 1,
    marginLeft: adapt(10),
    height: adapt(48),
    fontSize: adapt(12),
    textAlign: 'right'
  },
  commonDataCell: {
    paddingHorizontal: adapt(10),
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    height: adapt(48),
    borderBottomWidth: adapt(2),
    borderColor: '#f6f6f6'
  },
  commonCell: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  circleCell: {
    height: adapt(15),
    width: adapt(15),
    borderWidth: adapt(1),
    borderColor: '#4a4a4a',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: adapt(7.5)
  },
  backgroundColorCircle: {
    height: adapt(11),
    width: adapt(11),
    backgroundColor: '#fff',
    borderRadius: adapt(5.5)
  },
  showMyPhoneCell: {
    width: adapt(173),
    height: adapt(30),
    borderColor: '#D6D9DE',
    borderWidth: adapt(1),
    backgroundColor: '#f6f6f6',
    justifyContent: 'center',
    position: 'absolute',
    right: adapt(25),
    bottom: adapt(185),
    zIndex: 999
  },
  areaInputStyle: {
    flex: 1,
    paddingLeft: adapt(15),
    height: adapt(100),
    fontSize: adapt(12),
    paddingTop: adapt(15),
    alignItems: 'flex-start',
    textAlignVertical: 'top'
  },
  bottomCell: {
    width: width,
    bottom: 0,
    height: isIphoneX() ? adapt(80) : adapt(50),
    backgroundColor: '#00c2ef',
    alignItems: 'center'
  }
});
